<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>vue-入门Day.03 | 让技术更简单</title>

  <!-- keywords -->
  

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="Class 与 Style 绑定绑定 HTML Class传对象绑定我们可以传给 v-bind:class 一个对象，以动态地切换 class： 12&lt;div v-bind:class&#x3D;&quot;&amp;#123;active:isActive,green:isGreen&amp;#125;&quot;&gt;obj&lt;&#x2F;div&gt;&lt;!-- 意思为当isActive为true时，class">
<meta property="og:type" content="article">
<meta property="og:title" content="vue-入门Day.03">
<meta property="og:url" content="http://example.com/2022/03/17/vue-day-03/index.html">
<meta property="og:site_name" content="让技术更简单">
<meta property="og:description" content="Class 与 Style 绑定绑定 HTML Class传对象绑定我们可以传给 v-bind:class 一个对象，以动态地切换 class： 12&lt;div v-bind:class&#x3D;&quot;&amp;#123;active:isActive,green:isGreen&amp;#125;&quot;&gt;obj&lt;&#x2F;div&gt;&lt;!-- 意思为当isActive为true时，class">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2022-03-17T12:23:32.000Z">
<meta property="article:modified_time" content="2022-03-18T03:00:05.621Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternative" href="/atom.xml" title="让技术更简单" type="application/atom+xml">
  
  
    <link rel="icon" href="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  

  
<script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js"></script>

  
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>


  
<meta name="generator" content="Hexo 6.1.0"></head>
<body>
  <div id="container">
    <div id="particles-js"></div>
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/"></a></h1>
		</hgroup>

		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						<div class="icon-wrap icon-link hide" data-idx="2">
							<div class="loopback_l"></div>
							<div class="loopback_r"></div>
						</div>
						
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>标签</li>
						
						<li>友情链接</li>
						
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						
					</div>
				</section>
				
				
				
				<section class="switch-part switch-part3">
					<div id="js-friends">
					
			          <a target="_blank" class="main-nav-link switch-friends-link" href="https://github.com/smackgg/hexo-theme-smackdown">smackdown</a>
			        
			        </div>
				</section>
				

				
			</div>
		</div>
	</header>				
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide"></h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img lazy-src="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author"></h1>
			</hgroup>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div class="body-wrap"><article id="post-vue-day-03" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2022/03/17/vue-day-03/" class="article-date">
  	<time datetime="2022-03-17T12:23:32.000Z" itemprop="datePublished">2022-03-17</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      vue-入门Day.03
      
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
        

        
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="Class-与-Style-绑定"><a href="#Class-与-Style-绑定" class="headerlink" title="Class 与 Style 绑定"></a>Class 与 Style 绑定</h2><h3 id="绑定-HTML-Class"><a href="#绑定-HTML-Class" class="headerlink" title="绑定 HTML Class"></a>绑定 HTML Class</h3><h4 id="传对象绑定"><a href="#传对象绑定" class="headerlink" title="传对象绑定"></a>传对象绑定</h4><p>我们可以传给 v-bind:class 一个对象，以动态地切换 class：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">&quot;&#123;active:isActive,green:isGreen&#125;&quot;</span>&gt;</span>obj<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 意思为当isActive为true时，class绑定active，当isGreen为true时，class绑定green --&gt;</span></span><br></pre></td></tr></table></figure>
<p>和如下的data进行传值：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">    isActive<span class="punctuation">:</span><span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">    isGreen<span class="punctuation">:</span><span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<p>这样绑定class就成功了</p>
<h4 id="传数组绑定"><a href="#传数组绑定" class="headerlink" title="传数组绑定"></a>传数组绑定</h4><p>与class绑定，在数组中我们依然可以做到为元素绑定 ，但这是静态的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">&quot;[&#x27;active&#x27;,&#x27;green&#x27;]&quot;</span>&gt;</span>obj<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>这样就成功绑定了静态的class绑定。</p>
<p>如果想根据条件切换列表中的 class，可以用三元表达式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">&quot;[isActive ? &#x27;active&#x27;:&#x27;&#x27;, isGreen ? &#x27;green&#x27;:&#x27;&#x27;]&quot;</span>&gt;</span>obj<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 该含义为如果isActive为true，则绑定active，否则class为空 ,如果isGreen为true，则绑定green，否则class为空--&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="绑定内联样式"><a href="#绑定内联样式" class="headerlink" title="绑定内联样式"></a>绑定内联样式</h3><p>在data中取值，同样可用三元运算符根据条件切换列表的样式,如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">&quot;&#123;</span></span></span><br><span class="line"><span class="string"><span class="tag">        color:color,fontSize:size,backgroundColor:isActive? &#x27;#FF0000&#x27;: &#x27;&#x27;</span></span></span><br><span class="line"><span class="string"><span class="tag">    &#125;&quot;</span>&gt;</span>obj<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">color<span class="punctuation">:</span>&#x27;red&#x27;<span class="punctuation">,</span></span><br><span class="line">size<span class="punctuation">:</span>&#x27;<span class="number">35</span>px&#x27;<span class="punctuation">,</span></span><br><span class="line">isActive<span class="punctuation">:</span><span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="条件渲染和列表渲染"><a href="#条件渲染和列表渲染" class="headerlink" title="条件渲染和列表渲染"></a>条件渲染和列表渲染</h2><h3 id="v-if-条件渲染"><a href="#v-if-条件渲染" class="headerlink" title="v-if(条件渲染)"></a>v-if(条件渲染)</h3><p>v-if进行判断，当这个内容为true时则显示出页面，当为flase时则不显示，是利用删除标签和插入标签的形式存在的。<br>v-else紧跟在v-if后面当v-if判断失败时显示<br>v-show进行判断，当这个内容为true时则显示出页面，当为flase时则不显示，是利用css样式改变的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-if</span>=<span class="string">&quot;ok&quot;</span>&gt;</span>我是span标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-else</span>&gt;</span>我是审判<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-show</span>=<span class="string">&quot;ok&quot;</span>&gt;</span>我是span标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span> </span><br></pre></td></tr></table></figure>
<p>v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。</p>
<p>相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。</p>
<h4 id="用-key-管理可复用的元素"><a href="#用-key-管理可复用的元素" class="headerlink" title="用 key 管理可复用的元素"></a>用 key 管理可复用的元素</h4><p>可用 key 管理可复用的元素，只需添加一个具有唯一值的 key attribute 即可，每次切换时，输入框都将被重新渲染：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">v-if</span>=<span class="string">&quot;loginType === &#x27;username&#x27;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span>&gt;</span>Username<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">placeholder</span>=<span class="string">&quot;Enter your username&quot;</span> <span class="attr">key</span>=<span class="string">&quot;username-input&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">v-else</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span>&gt;</span>Email<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">placeholder</span>=<span class="string">&quot;Enter your email address&quot;</span> <span class="attr">key</span>=<span class="string">&quot;email-input&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="v-for-列表渲染"><a href="#v-for-列表渲染" class="headerlink" title="v-for(列表渲染)"></a>v-for(列表渲染)</h3><h4 id="在列表渲染的对象中"><a href="#在列表渲染的对象中" class="headerlink" title="在列表渲染的对象中"></a>在列表渲染的对象中</h4><p>在列表渲染的对象中，用多个参数作为索引，在列表渲染中加入一个key，key的值具有唯一性 。<br>如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(value,key,index) in object&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;key&quot;</span>&gt;</span></span><br><span class="line">&#123;&#123;key&#125;&#125;:&#123;&#123;value&#125;&#125;&#123;&#123;index&#125;&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">object<span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        title<span class="punctuation">:</span> <span class="string">&quot;腾讯快快快&quot;</span><span class="punctuation">,</span></span><br><span class="line">        content<span class="punctuation">:</span> <span class="string">&quot;字节快快快&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h4 id="在列表渲染的数组中"><a href="#在列表渲染的数组中" class="headerlink" title="在列表渲染的数组中"></a>在列表渲染的数组中</h4><p>在列表渲染中加入一个key，key的值具有唯一性 ,列表中的数组渲染。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">&lt;!-- 在列表渲染中加入一个key，key的值具有唯一性 ,列表中的数组渲染--&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(value,index) in arr&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">     &#123;&#123; value.name &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">arr<span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          name<span class="punctuation">:</span> <span class="string">&quot;zhangsan&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          name<span class="punctuation">:</span> <span class="string">&quot;lisi&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#123;</span></span><br><span class="line">          name<span class="punctuation">:</span> <span class="string">&quot;wangwu&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="表单输入绑定（v-model）"><a href="#表单输入绑定（v-model）" class="headerlink" title="表单输入绑定（v-model）"></a>表单输入绑定（v-model）</h2><p><strong>原理</strong>：用 <strong>v-model</strong> 指令在表单 <code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code> 及 <code>&lt;select&gt; </code>元素上创建<strong>双向数据绑定</strong>。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是<strong>语法糖</strong>。它负责<strong>监听用户的输入事件</strong>以<strong>更新数据</strong>，并对一些极端场景进行一些特殊处理。</p>
<p><strong>使用方式</strong>：<strong>v-model</strong> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 <strong>data</strong> 选项中声明初始值。</p>
<h3 id="输入框"><a href="#输入框" class="headerlink" title="输入框"></a>输入框</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model.number</span>=<span class="string">&quot;message&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;abc123&quot;</span> /&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- v-model 进行虚拟的双向绑定 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; message &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">  return <span class="punctuation">&#123;</span></span><br><span class="line">    message<span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span> <span class="comment">//初始默认值</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="多行文本输入框"><a href="#多行文本输入框" class="headerlink" title="多行文本输入框"></a>多行文本输入框</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">cols</span>=<span class="string">&quot;30&quot;</span> <span class="attr">rows</span>=<span class="string">&quot;10&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;message2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; message2 &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">  return <span class="punctuation">&#123;</span></span><br><span class="line">    message2<span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span> <span class="comment">//初始默认值</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="单选框"><a href="#单选框" class="headerlink" title="单选框"></a>单选框</h3><p>label标签常用于与checkbox或radio关联，以实现<strong>点击文字</strong>也能<strong>选中&#x2F;取消</strong><em>checkbox或radio</em>。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的<strong>id</strong>一致，注意是id而不是name</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">id</span>=<span class="string">&quot;one&quot;</span> <span class="attr">value</span>=<span class="string">&quot;one&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;once&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;one&quot;</span>&gt;</span>one<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- label标签常用于与checkbox或radio关联，以实现点击文字也能选中/取消checkbox或radio。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id一致，注意是id而不是name --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">id</span>=<span class="string">&quot;two&quot;</span> <span class="attr">value</span>=<span class="string">&quot;two&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;once&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;two&quot;</span>&gt;</span>two<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>once:&#123;&#123; once &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">  return <span class="punctuation">&#123;</span></span><br><span class="line">    once<span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span> <span class="comment">//初始默认值</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="多选框"><a href="#多选框" class="headerlink" title="多选框"></a>多选框</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>你喜欢哪个男孩<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">id</span>=<span class="string">&quot;jake&quot;</span> <span class="attr">value</span>=<span class="string">&quot;吴亦凡&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;twice&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;jake&quot;</span>&gt;</span>吴亦凡<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">id</span>=<span class="string">&quot;mike&quot;</span> <span class="attr">value</span>=<span class="string">&quot;杨洋&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;twice&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;mike&quot;</span>&gt;</span>杨洋<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">id</span>=<span class="string">&quot;jone&quot;</span> <span class="attr">value</span>=<span class="string">&quot;刘俊孝&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;twice&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;jone&quot;</span>&gt;</span>刘俊孝<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; twice &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">  return <span class="punctuation">&#123;</span></span><br><span class="line">    twice<span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span> <span class="comment">//初始默认值</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="下拉文本框"><a href="#下拉文本框" class="headerlink" title="下拉文本框"></a>下拉文本框</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">select</span> <span class="attr">name</span>=<span class="string">&quot;请选择&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;duo&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 200px&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;篮球&quot;</span>&gt;</span>篮球<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;足球&quot;</span>&gt;</span>足球<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;羽毛球&quot;</span>&gt;</span>羽毛球<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;乒乓球&quot;</span>&gt;</span>乒乓球<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">P</span>&gt;</span>&#123;&#123; duo &#125;&#125;<span class="tag">&lt;/<span class="name">P</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">  return <span class="punctuation">&#123;</span></span><br><span class="line">    duo<span class="punctuation">:</span> &#x27;&#x27;<span class="punctuation">,</span> <span class="comment">//初始默认值</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="表单提交"><a href="#表单提交" class="headerlink" title="表单提交"></a>表单提交</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 表单提交 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>提交<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">data() <span class="punctuation">&#123;</span></span><br><span class="line">  return <span class="punctuation">&#123;</span></span><br><span class="line">submit<span class="punctuation">:</span> function () <span class="punctuation">&#123;</span></span><br><span class="line">      <span class="comment">//提交数据</span></span><br><span class="line">      console.log(this.message);</span><br><span class="line">      const obj = <span class="punctuation">&#123;</span></span><br><span class="line">        msg<span class="punctuation">:</span> this.message<span class="punctuation">,</span></span><br><span class="line">        msg2<span class="punctuation">:</span> this.message2<span class="punctuation">,</span></span><br><span class="line">        one<span class="punctuation">:</span> this.once<span class="punctuation">,</span></span><br><span class="line">        two<span class="punctuation">:</span> this.twice<span class="punctuation">,</span></span><br><span class="line">      <span class="punctuation">&#125;</span>;</span><br><span class="line">      console.log(obj);</span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h2><h3 id="表单输入绑定修饰符"><a href="#表单输入绑定修饰符" class="headerlink" title="表单输入绑定修饰符"></a>表单输入绑定修饰符</h3><h4 id="lazy（事件之后进行同步）"><a href="#lazy（事件之后进行同步）" class="headerlink" title=".lazy（事件之后进行同步）"></a>.lazy（事件之后进行同步）</h4><p>在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为<strong>在 change 事件之后进行同步</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在“change”时而非“input”时更新 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model.lazy</span>=<span class="string">&quot;msg&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="number-转化成数字类型"><a href="#number-转化成数字类型" class="headerlink" title=".number(转化成数字类型)"></a>.number(转化成数字类型)</h4><p>如果想自动将用户的输入值转为<strong>数值类型</strong>，可以给 v-model 添加 number 修饰符：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model.number</span>=<span class="string">&quot;age&quot;</span> <span class="attr">type</span>=<span class="string">&quot;number&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>如果这个值无法被 <code>parseFloat()</code> 解析，则会返回原始的值。</p>
<h4 id="trim-过滤空白字符"><a href="#trim-过滤空白字符" class="headerlink" title=".trim(过滤空白字符)"></a>.trim(过滤空白字符)</h4><p>如果要<strong>自动过滤</strong>用户输入的<strong>首尾空白字符</strong>，可以给 v-model 添加 trim 修饰符：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model.trim</span>=<span class="string">&quot;msg&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h3><p>在事件处理程序中调用<strong>阻止默认行为</strong>： <code>event.preventDefault()</code> 或<strong>阻止冒泡</strong>： <code>event.stopPropagation()</code> 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。</p>
<p>可多种修饰符进行<strong>串联</strong></p>
<p>为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由<strong>点</strong>开头的指令后缀来表示的。</p>
<h4 id="stop（阻止冒泡）"><a href="#stop（阻止冒泡）" class="headerlink" title=".stop（阻止冒泡）"></a>.stop（阻止冒泡）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 阻止单击事件继续传播(冒泡) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-on:click.stop</span>=<span class="string">&quot;doThis&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="prevent-阻止事件的默认行为"><a href="#prevent-阻止事件的默认行为" class="headerlink" title=".prevent(阻止事件的默认行为)"></a>.prevent(阻止事件的默认行为)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 提交事件不再重载页面(阻止事件的默认行为) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">v-on:submit.prevent</span>=<span class="string">&quot;onSubmit&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="capture-添加事件监听器时使用事件捕获模式"><a href="#capture-添加事件监听器时使用事件捕获模式" class="headerlink" title="capture(添加事件监听器时使用事件捕获模式)"></a>capture(添加事件监听器时使用事件捕获模式)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 添加事件监听器时使用事件捕获模式 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-on:click.capture</span>=<span class="string">&quot;doThis&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="self-根节点事件是自身时触发"><a href="#self-根节点事件是自身时触发" class="headerlink" title=".self(根节点事件是自身时触发)"></a>.self(根节点事件是自身时触发)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 只当在 event.target 是当前元素自身时触发处理函数 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 即事件不是从内部元素触发的 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-on:click.self</span>=<span class="string">&quot;doThat&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="once-只会触发一次"><a href="#once-只会触发一次" class="headerlink" title=".once(只会触发一次)"></a>.once(只会触发一次)</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 点击事件将只会触发一次 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-on:click.once</span>=<span class="string">&quot;doThis&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="passive-滚动时触发"><a href="#passive-滚动时触发" class="headerlink" title=".passive(滚动时触发)"></a>.passive(滚动时触发)</h4><p>不要把 <code>.passive</code> 和 <code>.prevent</code> 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个<strong>警告</strong>。请记住，.passive 会<strong>告诉浏览器你不想阻止事件的默认行为</strong>。</p>
<p>这个 <code>.passive </code>修饰符尤其能够<strong>提升移动端的性能</strong>。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 而不会等待 `onScroll` 完成  --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 这其中包含 `event.preventDefault()` 的情况 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-on:scroll.passive</span>=<span class="string">&quot;onScroll&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="按键修饰符"><a href="#按键修饰符" class="headerlink" title="按键修饰符"></a>按键修饰符</h3><p>在<strong>监听键盘事件</strong>时，我们经常需要检查详细的按键。Vue 允许为 v-on 在<strong>监听键盘事件</strong>时添加<strong>按键修饰符</strong>：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:keyup.enter</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>enter<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 只有按enter键才会生效 --&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="config-keyCodes-自定义按键修饰符别名"><a href="#config-keyCodes-自定义按键修饰符别名" class="headerlink" title="config.keyCodes(自定义按键修饰符别名)"></a>config.keyCodes(自定义按键修饰符别名)</h4><p>还可以通过全局 <strong>config.keyCodes</strong> 对象<strong>自定义按键修饰符别名</strong>：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 可以使用 `v-on:keyup.f1`</span></span><br><span class="line">Vue.config.keyCodes.f1 = <span class="number">112</span></span><br></pre></td></tr></table></figure>

<h4 id="exact-修饰符-精确触发事件"><a href="#exact-修饰符-精确触发事件" class="headerlink" title=".exact 修饰符(精确触发事件)"></a>.exact 修饰符(精确触发事件)</h4><p><strong>.exact</strong> 修饰符允许你控制由精确的系统修饰符组合触发的事件。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 即使 Alt 或 Shift 被一同按下时也会触发 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click.ctrl</span>=<span class="string">&quot;onClick&quot;</span>&gt;</span>A<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 有且只有 Ctrl 被按下的时候才触发 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click.ctrl.exact</span>=<span class="string">&quot;onCtrlClick&quot;</span>&gt;</span>A<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 没有任何系统修饰符被按下的时候才触发 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click.exact</span>=<span class="string">&quot;onClick&quot;</span>&gt;</span>A<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="系统修饰键"><a href="#系统修饰键" class="headerlink" title="系统修饰键"></a>系统修饰键</h3><p>可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。<br><strong>ctrl</strong><br><strong>alt</strong><br><strong>shift</strong><br><strong>meta</strong></p>
<p>例如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Alt + C --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-on:keyup.alt.67</span>=<span class="string">&quot;clear&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Ctrl + Click --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-on:click.ctrl</span>=<span class="string">&quot;doSomething&quot;</span>&gt;</span>Do something<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="ref-获取标签"><a href="#ref-获取标签" class="headerlink" title="ref(获取标签)"></a>ref(获取标签)</h2><p>在标签中加上<code>ref=xxx</code>,在js中可通过<code>this.$refs.xxx</code>获取这个标签，类似于DOM中的获取标签，获取后可操控标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">ref</span>=<span class="string">&quot;gj&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span> <span class="attr">ref</span>=<span class="string">&quot;ulList&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(value,index) in arr&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;index&quot;</span>&gt;</span></span><br><span class="line">          &#123;&#123; value.name &#125;&#125;</span><br><span class="line">          <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;del(index)&quot;</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">methods<span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">  del<span class="punctuation">:</span>function(index)<span class="punctuation">&#123;</span></span><br><span class="line">        console.log(index);</span><br><span class="line">        console.log(this.$refs.gj);<span class="comment">//获取ref等于gj的这个标签</span></span><br><span class="line">        <span class="comment">// const ul=this.$refs.ulList;</span></span><br><span class="line">        <span class="comment">// const li=ul.children;//对应的三个子节点</span></span><br><span class="line">        <span class="comment">// // console.log(li);</span></span><br><span class="line">        <span class="comment">// ul.removeChild(li[index]);//删除三个子节点中对应的索引值，索引值没了，元素自然也没了</span></span><br><span class="line">        this.arr.splice(index<span class="punctuation">,</span><span class="number">1</span>);<span class="comment">//删除1个对应的子节点，元素消失</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>
      
    </div>
    
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/19/vue-day-04/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">&lt;</strong>
      <div class="article-nav-title">
        
          vue-入门Day.04
        
      </div>
    </a>
  
  
    <a href="/2022/03/16/vue-day.02/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">vue-入门Day.02</div>
      <strong class="article-nav-caption">&gt;</strong>
    </a>
  
</nav>

  
</article>


<div class="ds-share share" data-thread-key="vue-day-03" data-title="vue-入门Day.03" data-url="http://example.com/2022/03/17/vue-day-03/"  data-images="http://7xkj1z.com1.z0.glb.clouddn.com/head.jpg" data-content="vue-入门Day.03">
    <div class="ds-share-inline">
      <ul  class="ds-share-icons-16">
      	<li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">分享到：</a></li>
        <li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">微博</a></li>
        <li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ空间</a></li>
        <li><a class="ds-qqt" href="javascript:void(0);" data-service="qqt">腾讯微博</a></li>
        <li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">微信</a></li>
      </ul>
      <div class="ds-share-icons-more">
      </div>
    </div>
 </div>
 





</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
      <div class="footer-left">
        &copy; 2022 John Doe
      </div>
        <div class="footer-right">
          <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/smackgg/hexo-theme-smackdown" target="_blank">Smackdown</a>
        </div>
    </div>
  </div>
</footer>
    </div>
    
  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">



<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>

<script src="/js/main.js"></script>




<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js"></script>


  </div>
</body>
</html>